import { defineComponent, reactive, ref } from 'vue'
import { ElDialog, ElButton, ElForm, ElFormItem, ElSlider } from 'element-plus'

import type { FormInstance, FormRules } from 'element-plus'
import type { dimType } from './typings'

// 单灯调光
export default defineComponent({
  props: ['cancel', 'lampPostId'],
  emits: ['submitForm'],
  setup(props, { emit, expose }) {
    const ruleFormRef = ref<FormInstance>()
    const ruleForm = reactive<dimType>({})

    const rules = reactive<FormRules>({
      dimNum: [{ required: true, message: '亮度选择不能为空', trigger: 'blur' }]
    })
    //  提交
    const submitForm = () => {
      ruleFormRef.value?.validate(async (valid) => {
        if (valid) {
          emit('submitForm')
        }
      })
    }
    expose({ ruleForm, ruleFormRef })
    //  取消
    const resetForm = () => {
      ruleFormRef.value?.resetFields()
      props.cancel()
    }
    return () => (
      <ElDialog
        title="调光"
        modelValue={true}
        beforeClose={props.cancel}
        closeOnClickModal={false} // 点遮罩层不关弹窗
        draggable // 可拖拽
        width={600}
        v-slots={{
          footer: () => (
            <>
              <ElButton onClick={resetForm}>取消</ElButton>
              <ElButton type="primary" onClick={submitForm}>
                确定
              </ElButton>
            </>
          )
        }}
      >
        <ElForm
          ref={ruleFormRef}
          model={ruleForm}
          rules={rules}
          label-width="140px"
          labelPosition="right"
        >
          <ElFormItem label="亮度" prop="dimNum">
            <ElSlider v-model={ruleForm.dimNum} />
          </ElFormItem>
        </ElForm>
      </ElDialog>
    )
  }
})
